<template>
    <div class="tm-page">
        <tm-button @click="onClick">激活modal</tm-button>
        <tm-button @click="showLoading">激活Loading</tm-button>
        <tm-button @click="onClickToast">激活Toast</tm-button>
        <tm-button @click="openDialog">打开Dialog</tm-button>
        <tm-modal
            v-model="visible"
            content="你真的要这么做吗？"
            @cancel="handleCancel"
            @confirm="handleConfirm"
        ></tm-modal>
        <tm-loading v-model="loading"></tm-loading>

        <tm-dialog v-model:visible="dialog" :z-index="100">
            <strong>Welcome to China</strong>
            <br />
            <div>Hello,Tang Ming Gie Gie</div>
            <div>This is a stone coding Text</div>
            <div>Everything is ok</div>
        </tm-dialog>
    </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
import TmModal from '@tomatoUi/components/Modal/index.vue'
import TmButton from '@tomatoUi/components/Button/index.vue'
import TmLoading from '@tomatoUi/components/Loading/index.vue'
import showToast from '@tomatoUi/components/Toast/index.js'
import TmDialog from '@tomatoUi/components/Dialog/index.vue'

export default {
    components: {
        TmModal,
        TmButton,
        TmLoading,
        TmDialog
    },
    setup() {
        const state = reactive({
            visible: false,
            loading: false,
            dialog: false
        })

        const onClick = () => {
            state.visible = !state.visible
        }

        const showLoading = () => {
            state.loading = !state.loading
            setTimeout(() => {
                state.loading = false
            }, 3000)
        }

        const onClickToast = () => {
            showToast({
                content: '嘻嘻嘻嘻嘻',
                duration: 3000,
            })
        }

        const handleCancel = e => {
            console.log('handleCancel', e)
        }

        const handleConfirm = e => {
            console.log('handleConfirm', e)
        }


        const openDialog = () => {
            state.dialog = true;
        }

        return {
            ...toRefs(state),
            onClick,
            showLoading,
            onClickToast,
            handleCancel,
            handleConfirm,
            openDialog
        }
    },
}
</script>
